<template>
  <el-card class="clubListMain" style="max-width: 75vw">

    <div>
      <el-table class="listTable" :data="clubListData" :border=true style="width: 100%" :max-height="'70vh'">
        <el-table-column prop="clubName" label="社团名称" :width="tableWidth[0]" :align="'center'" />
        <el-table-column prop="clubLevel" label="社团级别" :width="tableWidth[1]" :align="'center'" />
        <el-table-column prop="number" label="社团人数" :width="tableWidth[2]" :align="'center'" />
        <el-table-column prop="clubState" label="社团状态" :width="tableWidth[3]" :align="'center'" />
        <el-table-column prop="options" label="操作" :width="tableWidth[4]" :align="'center'">
          <template #default="scope">
            <el-button id="buttonClubShow" @click="handleShowClub(scope.row)">
              社团主页
            </el-button>
            <el-button type="danger" @click="handleExitClub(scope.row)">退出社团</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
  <el-dialog v-model="jumpDialog" title="提示" width="500">
    <span>是否进入社团主页</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="jumpDialog = false">取消</el-button>
        <el-button type="primary" @click="jumpDialog = false">
          <div class="butonSure">确 认</div>
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="showClubDialogVisible" width="500" class="dialogText" 
  :title="clubTitle + ':你确定要退出社团吗？'">
    <el-form-item label="请填写退出社团的理由" label-position="top">
      <el-input v-model="reason" :autosize="{ minRows: 4, maxRows: 4 }" 
      type="textarea" placeholder="退社理由" maxlength="200" show-word-limit
        class="textInput" />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showClubDialogVisible = false">取消</el-button>
        <el-button @click="sbumitExit">提交退出申请</el-button>
      </div>

    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref, onUnmounted} from 'vue';
import api from '@/api';
import showMessageTip from '@/utils/showMessage';
import userStore from '@/stores/store';
import router from '@/router';
import debounce from '@/utils/debounce';


const jumpDialog = ref(false);
const clubListData = ref([]);
const tableWidth = ref([]);
const tableWidthRatio = ref([0.29, 0.15, 0.12, 0.15, 0.29]);
const clubTitle = ref();
const showClubDialogVisible = ref(false);
const reason = ref('');
const currentClubId = ref();
var debounceSetColumnSize = null;


const handleExitClub = (rowData) => {  //退出社团
  clubTitle.value = rowData.clubName;
  currentClubId.value = rowData.clubId;
  showClubDialogVisible.value = true;
}
const sbumitExit = async () => {
  const exitApplication = ref({
    bigAffairType: 2,
    affairType: 2,
    clubId: currentClubId.value,
    reason: reason.value
  })
  const result = await api.applicateExitClub(exitApplication.value);
  if (result[0] == 0) {
    const data = result[1].data;
    if (data.code == 1) {
      showMessageTip('已发送退出申请，等待审核', 'success');
      reason.value = '';
      showClubDialogVisible.value = false; 
    }
  }
  else {
    showMessageTip('网络请求失败', 'error');
  }
}
const handleShowClub = (rowData) => {
  userStore().setClubID(rowData.clubId);
  router.push('/managesys/clubview');
}

onMounted(async () => { //预处理表格数据
  const width = document.querySelector('.clubListMain').getBoundingClientRect().width-40;
  tableWidth.value[4] = width;
  for (let i = 0; i < 4; i++) {
    tableWidth.value[i] = tableWidthRatio.value[i] * width;
    tableWidth.value[4] -= tableWidth.value[i];
  }
  await handleUpdateList();
});
onMounted( () => {
  debounceSetColumnSize = debounce(setColumnSize, 300);
  window.addEventListener('resize', debounceSetColumnSize);
})
onUnmounted(() => {
  window.removeEventListener('resize', debounceSetColumnSize);
  debounceSetColumnSize.cancel();
});
const setColumnSize = () => {
  const width = document.querySelector('.clubListMain').getBoundingClientRect().width-40;
  tableWidth.value[4]=width;
  for(let i = 0; i<4 ;i++){
    tableWidth.value[i] = tableWidthRatio.value[i]*width;
    tableWidth.value[4] -= tableWidth.value[i];
  }
}

const handleUpdateList = async () => {
  const result = await api.getClubJoined();
  if (result[0] == 0) {
    const data = result[1].data;
    if (data.code == 1) {
      const dataList = data.data;
      clubListData.value = dataList;
      for (let i = 0; i < clubListData.value.length; i++) {
        if (clubListData.value[i].clubLevel == 0) {

          clubListData.value[i].clubLevel = '校级';
        }
        else {
          clubListData.value[i].clubLevel = '院级';
        }
        if (clubListData.value[i].clubState == 0) {
          clubListData.value[i].clubState = '可加入'
        }
        else if (clubListData.value[i].clubState == 1) {
          clubListData.value[i].clubState = '不可加入'
        }
        else {
          clubListData.value[i].clubState = '已停用'
        }

      }
    }
    else{
    showMessageTip('数据获取失败', 'error');
    return;
    }
  }
  else {
    showMessageTip('网络请求失败', 'error');
    return;
  }
}

</script>

<style scoped>
.pagdivisiong {
  left: 40%;
  position: relative;
}

.searchText {
  width: 240px;
  margin-right: 20px;
}

.tableClass {
  text-align: center;
}

.listTable {
  margin-top: 12px;
}

:deep(.listTable .el-table__header-wrapper th) {
  background-color: #549DFD;
  color: #fff;
  font-family: 'Microsoft YaHei';
}

#buttonClubAdd {
  border: none;
  background-color: #2cad2c;
  color: #fff;
}

#buttonClubAdd:disabled {
  background-color: #dbdada;
}

#buttonClubAdd:hover:not(:disabled) {
  background-color: #008200;
}

#buttonClubShow {
  border: #549DFD 1.5px solid;
  color: #549DFD;
}

.butonSure {
  color: #fff;
}

.footer {
  text-align: center;
  margin: 10px;
}

.dialogText {
  font-size: large;
}

.textInput {
  text-align: center;
}
</style>